<template>
  <view class="mapwrap">
    <view class="tour-box map-site">
      <map
        :style="{ width: '100%', height: screenHeight }"
        :latitude="point.latitude"
        :longitude="point.longitude"
        @tap="tapMap"
        :markers="marker"
      ></map>

      <view class="box" @click="gotochat">
        <image src="/static/img/icons/mapicon.png"></image>
        <text>确定</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      screenHeight: "600px",
      point: {
        latitude: 0,
        longitude: 0,
      },
      marker: [
        {
          id: 0,
          latitude: 0,
          longitude: 0,
          iconPath: "/static/img/icons/sitec.png",
          width: 30,
          height: 30,
        },
      ],
    };
  },
  onLoad() {},
  computed: {},
  methods: {
    gotochat(option = null) {
      if (option === "cancel") {
        this.$emit("saveMap");
        return;
      }
      this.$emit("saveMap", this.point);
    },
    tapMap(e) {
      // console.log("tapMap---", e);
      this.point.longitude = e.detail.longitude;
      this.point.latitude = e.detail.latitude;
      this.marker[0].longitude = e.detail.longitude;
      this.marker[0].latitude = e.detail.latitude;
    },
    async init(longitude, latitude) {
      var that = this;
      //获取屏幕高度
      var sysInfo = await uni.getSystemInfoAsync();
      that.screenHeight = sysInfo[1].screenHeight + "px";
      if (!(longitude && latitude))
        uni.getLocation({
          type: "gcj02",
          success: function(res) {
            that.point.latitude = res.latitude;
            that.point.longitude = res.longitude;
            that.marker[0].longitude = res.longitude;
            that.marker[0].latitude = res.latitude;
          },
        });
      else that.point.latitude = latitude;
      that.point.longitude = longitude;
      that.marker[0].longitude = longitude;
      that.marker[0].latitude = latitude;
    },
    reAuth(longitude, latitude) {
      let that = this;
      uni.getSetting({
        success(res) {
          if (!res.authSetting["scope.userLocation"]) {
            uni.authorize({
              scope: "scope.userLocation",
              success(res) {
                // 授权成功
                uni.showToast({
                  title: "授权成功",
                  icon: "none",
                  success: function() {
                    /* uni.redirectTo({
                      url: "*******",
                    }); */
                    that.init(longitude, latitude);
                  },
                });
              },
              fail() {
                uni.showModal({
                  content: "检测到您没打开获取地理权限，是否去设置打开？",
                  confirmText: "确认",
                  cancelText: "取消",
                  success: (res) => {
                    if (res.confirm) {
                      uni.openSetting({
                        success: (res) => {
                          uni.showToast({
                            title: "授权后请重新打开此页面",
                            icon: "none",
                            success: function() {
                              /* uni.redirectTo({
                                url: "********",
                              }); */
                              this.init(longitude, latitude);
                            },
                          });
                        },
                        fail: (err) => {
                          // console.log(err);
                          uni.showToast({
                            title: err,
                            icon: "none",
                            success: function() {
                              uni.navigateBack();
                            },
                          });
                        },
                      });
                    } else {
                      uni.showToast({
                        title: "获取地理位置授权失败",
                        icon: "none",
                        success: function() {
                          uni.navigateBack();
                        },
                      });
                    }
                  },
                });
              },
            });
          } else {
            that.init(longitude, latitude);
          }
        },
        fail() {
          uni.showToast({
            title: "获取地理位置授权失败",
            icon: "none",
            success: function() {
              uni.navigateBack();
            },
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mapwrap {
  z-index: 1000000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.navbar-right {
  margin-right: 24rpx;
  display: flex;
}

.right-item {
  margin: 0 12rpx;
  position: relative;
  color: #ffffff;
  display: flex;
}

/* 随手拍定位 */
.map-site {
  position: relative;
}

.map-site .s1 {
  left: 210rpx;
  top: 500rpx;
}
.map-site .s2 {
  left: 420rpx;
  top: 600rpx;
}
.map-site .s1 .tip {
  background: #fc3f46;
}
.map-site .s2 .tip {
  background: #2979ff;
}

.map-site .box {
  position: fixed;
  bottom: 100rpx;
  width: 180rpx;
  height: 180rpx;
  display: block;
  text-align: center;
  margin: 0 auto;
  left: 285rpx;
  border-radius: 50%;
  background: rgba(87, 152, 232, 0.7);
  z-index: 9999;
}
.map-site .box image {
  width: 70rpx;
  height: 70rpx;
  margin: 0 auto;
  display: block;
  padding: 35rpx 0 5rpx;
}
.map-site .box text {
  font-size: 32rpx;
  color: #fff;
  text-align: center;
}

</style>
